<template>
  <div class="mobile-list-item" @click="$emit('click')">
    <div class="item-header">
      <slot name="header">
        <div class="item-title">{{ title }}</div>
        <div v-if="status" class="item-status" :class="statusClass">{{ status }}</div>
      </slot>
    </div>
    <div class="item-content">
      <slot></slot>
    </div>
    <div v-if="$slots.footer" class="item-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
    name: 'MobileListItem',
    props: {
        title: {
            type: String,
            default: ''
        },
        status: {
            type: String,
            default: ''
        },
        statusType: {
            type: String,
            default: 'default',
            validator: value => ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(value)
        }
    },
    computed: {
        statusClass () {
            return {
                'status-default': this.statusType === 'default',
                'status-primary': this.statusType === 'primary',
                'status-success': this.statusType === 'success',
                'status-warning': this.statusType === 'warning',
                'status-danger': this.statusType === 'danger',
                'status-info': this.statusType === 'info'
            };
        }
    }
};
</script>

<style lang="scss" scoped>
.mobile-list-item {
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #ebeef5;

    .item-title {
      font-weight: bold;
      color: #303133;
    }

    .item-status {
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 12px;

      &.status-default {
        background-color: #f4f4f5;
        color: #909399;
      }

      &.status-primary {
        background-color: #ecf5ff;
        color: #409eff;
      }

      &.status-success {
        background-color: #f0f9eb;
        color: #67c23a;
      }

      &.status-warning {
        background-color: #fdf6ec;
        color: #e6a23c;
      }

      &.status-danger {
        background-color: #fef0f0;
        color: #f56c6c;
      }

      &.status-info {
        background-color: #f4f4f5;
        color: #909399;
      }
    }
  }

  .item-content {
    padding: 15px;
  }

  .item-footer {
    padding: 10px 15px;
    border-top: 1px solid #ebeef5;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
